<!--
  我的档案页面
-->
<template>
  <div>
    <el-divider></el-divider>
    <el-form ref="form" :model="form" label-width="80px" v-if=$store.state.record_status>
      <el-row>
        <el-col :span=6>
          <el-form-item label="">
            <el-page-header @back="goBack" content="档案详细信息"></el-page-header>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=12 :push=6>
          <el-form-item label="姓名">
            <el-input v-model="form.name" size="small" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=12 :push=6>
          <el-form-item label="身份证号">
            <el-input v-model="form.idNumber" size="small" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=6 :push=6>
          <el-form-item label="年龄">
            <el-input v-model="form.age" size="small" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span=6 :push=6>
          <el-form-item label="出生日期">
            <el-input v-model="form.birthday" size="small" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=6 :push=6>
          <el-form-item label="性别">
            <el-radio-group v-model="form.gender" disabled>
              <el-radio label="男" border>男</el-radio>
              <el-radio label="女" border>女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span=6 :push=6>
          <el-form-item label="婚姻状况">
            <el-radio-group v-model="form.maritalStatusStr" disabled>
              <el-radio label="是" border>已婚</el-radio>
              <el-radio label="否" border>未婚</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col  :span=6 :push=6>
          <el-form-item label="民族">
            <el-input v-model="form.nation" size="small" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col  :span=6 :push=6>
          <el-form-item label="政治面貌">
            <el-select v-model="form.politicsStatus" placeholder="请选择" disabled>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=6 :push=6>
          <el-form-item label="是否在岗">
            <el-radio-group v-model="form.workerStatusStr" disabled>
              <el-radio label="是" border>在岗</el-radio>
              <el-radio label="否" border>离岗</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span=6 :push=6>
          <el-form-item label="有无医保">
            <el-radio-group v-model="form.insuranceStatusStr" disabled>
              <el-radio label="是" border>有</el-radio>
              <el-radio label="否" border>无</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=6 :push=6>
          <el-form-item label="年总收入">
            <el-input v-model="form.salary" size="small" placeholder="单位:元" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span=6 :push=6>
          <el-form-item label="住房面积">
            <el-input v-model="form.livingSpace" size="small" placeholder="单位:平方米" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=6 :push=6>
          <el-form-item label="是否健康">
            <el-radio-group v-model="form.healthStatusStr" disabled>
              <el-radio label="是" border>是</el-radio>
              <el-radio label="否" border>否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col  :span=6 :push=6>
          <el-form-item label="疾病类型">
            <el-input v-model="form.illness" size="small" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=12 :push=6>
          <el-form-item label="致困原因">
            <el-select v-model="form.stuckReasonIds" multiple placeholder="请选致困原因" style="width: 100%" disabled>
              <el-option
                v-for="item in reasons"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=6 :push=6>
          <el-form-item label="邮编">
            <el-input v-model="form.postcode" size="small" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col  :span=6 :push=6>
          <el-form-item label="电子邮箱">
            <el-input v-model="form.email" size="small" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=6 :push=6>
          <el-form-item label="联系电话">
            <el-input v-model="form.phoneNumber" size="small" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span=6 :push=6>
          <el-form-item label="银行卡号">
            <el-input v-model="form.creditCardNumbers" size="small" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form ref="form" label-width="80px" v-if="!$store.state.record_status">
      <el-row>
        <el-col :span=6 :push=6>
          <el-form-item>
            <h2>请先创建档案</h2>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

import instance from "../../../utils/request";

export default {
  name: "RecordApply",
  data() {
    return {
      reasons:[{
        value: 5,
        label:'子女上学'
      }, {
        value: 3,
        label: '家人重病'
      }, {
        value: 2,
        label: '本人失业'
      }, {
        value: 1,
        label: '本人重病'
      }, {
        value: 4,
        label: '自然灾害'
      }],
      checked_reasons:[],
      age:1,
      form: {
      },
      options: [{
        value: 0,
        label: '中共党员'
      }, {
        value: 1,
        label: '中共预备党员'
      }, {
        value: 2,
        label: '共青团员'
      }, {
        value: '3',
        label: '民革会员'
      }, {
        value: '4',
        label: '民盟盟员'
      }, {
        value: '5',
        label: '民建会员'
      }, {
        value: '6',
        label: '民进会员'
      }, {
        value: '7',
        label: '农工党党员'
      }, {
        value: '8',
        label: '致公党党员'
      }, {
        value: '9',
        label: '九三学社社员'
      }, {
        value: '10',
        label: '台盟盟员'
      }, {
        value: '11',
        label: '无党派人士'
      }, {
        value: '12',
        label: '群众'
      }]
    }
  },
  methods: {
    //返回页面方法
    goBack() {
      this.$router.push({path: '/index/worker/record'})
      this.$store.commit('changeMyRecord_StatusToTrue');
    },
  },
  //页面加载方法，获取档案信息
  created() {
    let _this = this;
    instance.post('/api/record/preview').then(function (res) {
      if(res.data.code === 200){
        _this.form = res.data.data;
        console.log(_this.form);
      }
      else {
        alert('获取档案信息失败，请重试！');
        _this.$router.push({path: '/index/worker/record'});
      }
    }).catch(function (err) {
      console.log(err);
    })
  }
}
</script>

<style scoped>
.root-box{
}
.el-radio {
  color: #606266;
  font-weight: 500;
  cursor: pointer;
  margin-right: 5px;
  float: left;
}
.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 10px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>
